<template>
	<el-container>
		<el-main>
			<el-row :gutter="15">
				<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in flowList" :key="item.flowId" style="cursor: pointer;">
					<el-card :header="item.flowName" @click="advSearchFlow(item)" class="item-background" :style="randomRgb()">
						<el-row :gutter="15" style="text-align: center">
							<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
								已办结:{{ item.endZs }}条
							</el-col>
							<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
								办理中:{{ item.processZs }}条
							</el-col>
							<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
								已删除:{{ item.delZs }}条
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>
<script>
export default {
	data() {
		return {
			flowList: [],
			randomRgb() {
				let R = Math.floor(Math.random() * 100+150);
				let G = Math.floor(Math.random() * 200+50);
				let B = Math.floor(Math.random() * 50);
				let rgb1='rgb(' + R + ',' + G + ',' + B + ', .8)'
				let rgb2='rgb(' + B + ',' + R + ',' + G + ', .8)'
				return {
					background: 'linear-gradient(to right,'+rgb1+','+rgb2+')',
					color: '#fff',
					cursor: 'pointer'
				};
			},
		}
	},
	mounted() {
		this.getQueryAdvBpmFlowList();
	},
	methods: {
		async getQueryAdvBpmFlowList() {
			var res = await this.$API.bpm.bpmFlow.getQueryAdvBpmFlowList.get({model:'0'});
			if (res.code == 200) {
				this.flowList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		advSearchFlow(item) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/bpm/query/tablequery',
					query: {
						flowId: item.flowId
					}
				})
			})
		}
	}
}
</script>
<style scoped>
:deep(.el-card__header){
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
</style>
